<!--
 * @Description: 问题反馈
 * @Author: liu (1427179517@qq.com)
 * @Date: 2023-05-05 15:16:08
 * @LastEditors: liu (1427179517@qq.com)
 * @LastEditTime: 2023-05-09 14:57:33
 * @FilePath: \jiekuan-app\src\subPages\other\feedback.vue
-->
<template>
  <div class="page">
    <div class="page-header">
      <u-navbar
        title="问题反馈"
        :background="nav_background"
        title-color="#fff"
        back-icon-color="#fff"
        :height="60"
        :border-bottom="false"
        :clearable="false"
      ></u-navbar>
    </div>
    <div class="page-content">
      <div class="u-m-l-10 u-m-b-22">问题描述</div>
      <u-input
        v-model="form_msg.feedback"
        placeholder="请描述您的问题和意见"
        type="textarea"
        class="textarea_box"
        height="280"
      />
      <div class="u-m-t-40 u-m-b-20 u-m-l-10">照片 （选填）</div>
      <uploadView
        uploadText=""
        ref="upload"
        moduleName="upload"
        :maxCount="1"
        multiple
        :fileList="imgList"
        @onChange="handleUploadChange"
        @onPreview="handleUploadPreview"
        @onRemove="handleUploadRemove"
        class="uploadViewId negative-m-1"
        :width="200"
        :height="200"
      >
      </uploadView>
    </div>
    <div class="page-footer">
      <div class="btn_box">
        <button class="btn" @click="apiPostFddFeedbackCreate">提交反馈</button>
        <div class="u-m-t-30 hint">有问题？立即咨询<span class="text">在线客服</span></div>
      </div>
    </div>
  </div>
</template>

<script>
import uploadView from '@/components/yl-uploadView'
export default {
  name: 'Feedback', // 页面名称
  components: { uploadView }, // 挂载组件
  props: {}, // 组件传值
  data() {
    return {
      nav_background: { background: 'transparent' },
      form_msg: {
        phone: uni.getStorageSync('mobile'),
        feedback: '',
		backPic:''
      }, // 提交信息
      imgList: [], // 图片列表
    }
  },
  computed: {}, // 计算机属性 类似与data概念
  watch: {}, // 监控data中数据变化
  created() {}, // 生命周期-创建完成(可以访问当前this实例)
  mounted() {}, // 生命周期-挂载完成(可以访问DOM元素)
  methods: {
    apiPostFddFeedbackCreate() {
      if (!this.form_msg.feedback) {
        this.$toast('请输入要提交的问题')
        return
      }
	  console.log("sahdgasjhdksadjhsa");
	  console.log(this.albumList);
	  console.log(this.imgList);
      const params = { ...this.form_msg }
      this.$u.api.PostFddFeedbackCreate(params).then((res) => {
        this.$toast('提交反馈成功')
        setTimeout(() => {
          uni.navigateBack()
        }, 2000)
      })
    },
    /**
     * @author: yiling (315800015@qq.com)
     * @description: 全屏预览图片时触发
     * @param {String} url 为当前选中的图片地址
     * @param {Array} lists 目前组件内的所有图片数组，index为通过props传递的index参数
     * @param {Number} name 为通过props传递的index参数(1.6.1加入)
     * @return {*}
     * @Date: 2021-04-17 11:36:57
     */
    handleUploadPreview(options) {
      uni.setStorageSync('uploadRefresh', true)
    },
    /**
     * @author: yiling (315800015@qq.com)
     * @description: 移除图片时触发
     * @param {Number} index 索引
     * @param {Array} lists 完整数据
     * @param {Number} name 通过props传递的index参数
     * @return {*}
     * @Date: 2021-04-18 13:09:47
     */
    handleUploadRemove(options) {
      const { index, lists, name, moduleName } = options
      console.log('onRemove', options)
      // this.$set(this.form, 'image', str)
    },
    /**
     * @author: yilingsj（315800015@qq.com）
     * @description: 上传后触发
     * @param {type}
     * @return:
     * @Date: 2020-07-20 10:43:06
     */
    handleUploadChange(options) {
      console.log(options, '引用后上传结束');
	  this.form_msg.backPic = options.lists[0].response.data;
      const { res, index, lists, moduleName } = options
      this.albumList.push(options.lists[0].response.data[0].frontUrl)
    },
  }, // 挂载一些方法
  onLoad(options) {
    console.log('onLoad', options, Date.now())
  }, // 生命周期回调—监听页面加载
  onShow() {}, // 生命周期回调—监听页面显示
  onReady() {}, // 生命周期回调—监听页面初次渲染完成
  onHide() {}, // 生命周期回调—监听页面隐藏
  onUnload() {}, // 生命周期回调—监听页面卸载
}
</script>

<style lang="scss" scoped>
.page {
  background-image: url('http://minio.tianhong.mobi/mall/xiaoq/home_bg.png');
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}
.page-content {
  padding: 20rpx 45rpx;
  font-size: 31rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  color: #ffffff;
}
.textarea_box {
  border-radius: 5rpx;
  background-color: #fff;
  padding: 10rpx 20rpx !important;
}
.icon {
  width: 27rpx;
  height: 30rpx;
}
.btn_box {
  padding: 0 195rpx 63rpx;
  text-align: center;
}
.btn {
  width: 360rpx;
  height: 90rpx;
  background: #fcc307;
  border-radius: 45rpx;
  font-size: 33rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  color: #ffffff;
  line-height: 90rpx;
}
.hint {
  font-size: 25rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  color: #ffffff;
}
.text {
  color: #ffdf50;
}
</style>
